<template>
    <div class="map-wrap">
        <div id="container"></div>
        <div class="controls column store-info" v-if="storeInfo">
            <!-- <div class='store'>门诊取药</div> -->
            <div class='info-up flex'>
                <img :src='storeInfo.logo'  class='store-img'></img>
                <div class='name'> {{storeInfo.name}}</div>
                <div class='address flex'>
                    <img src='../assets/address.png'></img>
                    <div class='overhidden'> {{storeInfo.address}}</div>
                </div>
            </div>
            <div class='intro overhidden flex'>简介: {{storeInfo.describe}}</div>
            <div class='intro flex'>电话: {{storeInfo.phone}}</div>
            <div class="store-down flex">
                <a class='call flex' @click='callTap(storeInfo.phone)'>
                    <img src='../assets/call.png'></img>
                    <span>一键拨号</span>
                </a>
                <div class='call flex' @click='navigationTap(storeInfo.name,storeInfo.lat,storeInfo.lng)'>
                    <img src='../assets/navigation.png'></img>
                    <span>一键导航</span>
                </div>
                <div class='call flex'  @click='getDurg(storeInfo.name,storeInfo.distance,storeInfo.clinicid)' v-if="status == 'get'">
                    <img src='../assets/getDrug.png'></img>
                    <span>门诊取药</span>
                </div>
                <div class='call flex'  @click='goRegistration(storeInfo.orgid)' v-else>
                    <img src='../assets/registration.png'></img>
                    <span>预约挂号</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { orginfo,getorginfoone,saverecipebilldrugstore,getMstr } from "./../api/index";
import axios from 'axios';

export default {
  data() {
    return {
      map: "",
      geolocation: "",
      layer: false, //弹窗变量
      latitude: "", //我的纬度
      longitude: "", //我的经度
      storeInfo: {
        name: "",
        address: "",
        lat: "",
        lng: "",
        phone: "",
        describe: "",
        logo: "",
        distance: "",
        clinicid: "",
        orgid:''
      }, //门店信息
      status: "", //是否是从购药页面进来的
      clinicid: "", //门诊id
      recipeid: "", //处方id
      orgid:'',
      storeList:[],
      flag:true
    };
  },
  mounted() {
    if(this.$route.params.status){
      this.status = this.$route.params.status
    }
    if(this.$route.params.clinicid){
      this.clinicid = this.$route.params.clinicid
    }
    if(this.$route.params.recipeid){
      this.recipeid = this.$route.params.recipeid
    }
    //或者我的定位
    this.geolocation = new qq.maps.Geolocation(
      "DOEBZ-DIUCW-EZGRW-OZZVJ-U2STE-WJFGV",
      "zhenhe"
    );
    this.geolocation.getLocation(this.showPosition,null);
    
  },
  methods: {
    //定位
    showPosition(position) {
      console.log(position);
      this.latitude = position.lat;
      this.longitude = position.lng;
      this.map = new qq.maps.Map(document.getElementById("container"), {
        zoom: 12,
        center: new qq.maps.LatLng(this.latitude, this.longitude),
      });
      
      //标注
      let mymarker = new qq.maps.Label({
        position: new qq.maps.LatLng(this.latitude, this.longitude),
        map: this.map,
        content:  `我在${position.addr || ''} 附近>`
      });
      let mymarker1 = new qq.maps.Marker({
        position: new qq.maps.LatLng(this.latitude, this.longitude),
        map: this.map,
      });
      //判断是否是获取指定门诊的信息
      if(sessionStorage.getItem('mstr')){
        if(this.clinicid){
          this.getOnlyDurgStore()
        }else{
          this.getDurgStore(this.latitude, this.longitude)
        }
      }else{
        getMstr().then(res => {
          if (res.data.status === 1) {
            window.location.href = res.data.data.url;
          }
        });
      }
      
    },
    //获取指定门诊
    getOnlyDurgStore(){
      let mstr = sessionStorage.getItem('mstr')
      getorginfoone(mstr,this.clinicid).then((res)=>{
        if(res.data.status === 1){
          //标注
          let marker1 = new qq.maps.Marker({
            position: new qq.maps.LatLng(res.data.data.lat, res.data.data.lng),
            map: this.map,
          });
          let marker = new qq.maps.Label({
            position: new qq.maps.LatLng(res.data.data.lat, res.data.data.lng),
            map: this.map,
            content:  `${res.data.data.clinicname}`
          });
          this.storeList = res.data.data
          this.storeInfo.name = res.data.data.clinicname
          this.storeInfo.lat = res.data.data.lat
          this.storeInfo.lng = res.data.data.lng
          this.storeInfo.phone = res.data.data.phone
          this.storeInfo.address = res.data.data.address
          this.storeInfo.describe = res.data.data.describe
          this.storeInfo.logo = res.data.data.logo
          this.storeInfo.distance = res.data.data.distance
          this.storeInfo.clinicid = res.data.data.clinicid  
          this.storeInfo.orgid = res.data.data.orgid 
        }
      })
    },
    //获取所有门诊
    getDurgStore(latitude,longitude){
      let mstr = sessionStorage.getItem('mstr')
      orginfo(mstr,latitude,longitude).then((res)=>{
        if(res.data.status === 1){
          console.log(res.data.data)
          this.storeList = res.data.data
          this.storeInfo.name = res.data.data[0].clinicname
          this.storeInfo.lat = res.data.data[0].lat
          this.storeInfo.lng = res.data.data[0].lng
          this.storeInfo.phone = res.data.data[0].phone
          this.storeInfo.address = res.data.data[0].address
          this.storeInfo.describe = res.data.data[0].describe
          this.storeInfo.logo = res.data.data[0].logo
          this.storeInfo.distance = res.data.data[0].distance
          this.storeInfo.clinicid = res.data.data[0].clinicid   
          this.storeInfo.orgid = res.data.data[0].orgid
          for(let i=0;i<res.data.data.length;i++){
            //标注
            let marker1 = new qq.maps.Marker({
              position: new qq.maps.LatLng(res.data.data[i].lat, res.data.data[i].lng),
              map: this.map,
            });
            let marker = new qq.maps.Label({
              position: new qq.maps.LatLng(res.data.data[i].lat, res.data.data[i].lng), 
              map: this.map,
              content:  `${res.data.data[i].clinicname}`
            });
            marker.name = res.data.data[i].clinicname;
            marker.lat = res.data.data[i].lat;
            marker.lng = res.data.data[i].lng;
            marker.phone = res.data.data[i].phone;
            marker.address = res.data.data[i].address;
            marker.describe = res.data.data[i].describe;
            marker.logo = res.data.data[i].logo;
            marker.distance = res.data.data[i].distance;
            marker.clinicid = res.data.data[i].clinicid; 
            marker.orgid = res.data.data[i].orgid
            //标注点击事件
            qq.maps.event.addListener(marker, 'click', (e)=>{ 
              this.storeInfo.name = e.target.name
              this.storeInfo.lat = e.target.lat
              this.storeInfo.lng = e.target.lng
              this.storeInfo.phone = e.target.phone
              this.storeInfo.address = e.target.address
              this.storeInfo.describe = e.target.describe
              this.storeInfo.logo = e.target.logo
              this.storeInfo.distance = e.target.distance
              this.storeInfo.clinicid = e.target.clinicid  
              this.storeInfo.orgid = e.target.orgid 
            });
          }
        }
      })
    },
    //拨打电话
    callTap(phone){
      location.href = 'tel:'+ phone
    },
    //导航
    navigationTap(name,lat,lng){
      let url = `https://apis.map.qq.com/tools/poimarker?type=1&keyword=${name}&center=${lat},${lng}&radius=1000&key=DOEBZ-DIUCW-EZGRW-OZZVJ-U2STE-WJFGV&referer=zhenhe`
      location.href = url
    },
    //去预约挂号
    goRegistration(clinicid){
      this.$router.push({
        name:'doctorList',
        params:{
          keyword:'',
          clinicid:clinicid,
          status:'registration'
        }
      })
    },
    //去门诊取药
    getDurg(name,distance,clinicid){
      let mstr = sessionStorage.getItem('mstr')
      let data = {
        name: name,
        distance: distance,
        clinicid: clinicid
      }
      sessionStorage.setItem('durgStoreData',JSON.stringify(data))
      if(this.flag){
        this.flag = false
        saverecipebilldrugstore(mstr,clinicid,this.recipeid).then((res)=>{
          if(res.data.status === 1){
            setTimeout(()=>{
              this.$router.back(-1)
            },1000)
          }else{
            Toast({
              message:res.data.info,
              position:'center',
              duration:2000
            })
          }
          setTimeout(()=>{
            this.flag = true
          },1500)
        })
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../base/css/_base.scss";
#container {
  width: 100%;
  height: 100vh;
  z-index: 1;
}

.map-wrap{
  position: relative;
}
.controls {
  width: torem(674px);
  height:  torem(310px);
  background-color: #fff;
  border-radius:  torem(10px);
  border: solid 1px #666;
  position: absolute;
  bottom:  torem(125px);
  left: 50%;
  transform: translateX(-50%);
  padding:  torem(21px)  torem(27px);
  box-sizing: border-box;
  z-index: 100;
}

/* 门诊信息 */

.controls .info-up {
  align-items: center;
  margin-bottom:  torem(20px);
  position: relative;
}

.controls .store-img {
  width:  torem(125px);
  height:  torem(85px);
  border-radius:  torem(4px);
  margin-right:  torem(15px);
  object-fit: cover;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.info-up .name {
  color: #333;
  font-size:  torem(28px);
  font-weight: bold;
  position: absolute;
  left:  torem(141px);
  top: 0;
  flex: 1;
}

.store {
  width:  torem(120px);
  height:  torem(60px);
  text-align: center;
  line-height:  torem(60px);
  font-size:  torem(26px);
  color: #fff;
  background: #db5034;
  position: absolute;
  right:  torem(10px);
  top:  torem(10px);
  border-radius:  torem(10px);
  z-index: 10;
}

.info-up .address {
  color: #333;
  font-size:  torem(22px);
  align-items: center;
  margin-top:  torem(10px);
  position: absolute;
  left:  torem(141px);
  top:  torem(40px);
  flex: 1;
}

.info-up .address .overhidden {
  width:  torem(420px);
}

.info-up .address img {
  width:  torem(19px);
  height:  torem(23px);
  margin-right:  torem(10px);
}

.controls .intro {
  color: #333;
  font-size:  torem(28px);
  font-weight: bold;
  margin-top:  torem(10px);
  width:  torem(600px);
}

.controls .store-down {
  align-items: center;
  margin-top:  torem(30px);
  justify-content: space-between;
}

.controls .store-down .call {
  color: #666;
  font-size:  torem(28px);
  align-items: center;
}

.store-down .call img {
  width:  torem(50px);
  height:  torem(50px);
  margin-right:  torem(15px);
}

.location {
  position: fixed;
  left:  torem(30px);
  top:  torem(650px);
}

.location img {
  width: torem(77px);
  height:  torem(77px);
}
</style>